<template>
    <view class="page">
        <view class="my-top">
            <!-- head -->
            <view class="head" :style="'background-color: rgba(255,255,255,'+(scrollTop/50)+');'">
                <view class="portrait">
                    <image v-show="scrollTop>20" src="//img11.360buyimg.com/jdphoto/s40x40_jfs/t1/25255/18/10701/1678/5c89f892E78c04688/684d63c0d68e39b1.png"></image>
                </view>
                <view class="title">
                    <text v-show="scrollTop>20">我的</text>
                </view>
                <view class="setting-mess">
                    <view class="setting" @click="onSetting">
                        <text class="iconfont icon-setting" :style="scrollTop>20?'color:#333333':''"></text>
                    </view>
                    <view class="mess" @click="onMessage">
                        <text class="iconfont icon-xiaoxi" :style="scrollTop>20?'color:#333333':''"></text>
                    </view>
                </view>
            </view>
            <!-- 用户信息 -->
            <view class="user-info" style="display: none">
                <view class="portrait">
                    <image src="http://img2.imgtn.bdimg.com/it/u=1039075865,3371165857&fm=26&gp=0.jpg"></image>
                </view>
                <view class="info">
                    <view class="nickname">
                        <text>nickname</text>
                    </view>
                    <view class="rank">
                        <image src="/static/rank.png"></image>
                        <text>v1</text>
                    </view>
                </view>
            </view>
            <view class="user-info" @click="onUserInfo">
                <view class="portrait">
                    <!-- 根据 hasToken 决定显示默认头像还是用户头像 -->
                    <image v-if="hasToken" :src="userImg"></image>
                    <image v-else :src="img"></image>
                </view>
                <view class="info">
                    <view class="nickname">
                        <!-- 根据 hasToken 决定显示用户昵称还是登录/注册 -->
                        <text v-if="hasToken">{{userName}}</text>
                        <text v-else>登录/注册</text>
                    </view>
                </view>
            </view>
            <!-- 关注区 -->
            <view class="focus-area">
                <view class="list" @click="onCollect('goods')">
                    <view class="num">
                        <text>28</text>
                    </view>
                    <view class="title">
                        <text>商品关注</text>
                    </view>
                </view>
                <view class="list" @click="onCollect('content')">
                    <view class="num">
                        <text>28</text>
                    </view>
                    <view class="title">
                        <text>喜欢的内容</text>
                    </view>
                </view>
                <view class="list" @click="onCollect('record')">
                    <view class="num">
                        <text>28</text>
                    </view>
                    <view class="title">
                        <text>浏览记录</text>
                    </view>
                </view>
            </view>
            <!-- 会员 -->
            <view class="vip-info" @click="onMmeberVip">
                <view class="vip">
                    <text>超级会员</text>
                    <text class="line"></text>
                </view>
                <view class="vip-explain">
                    <text>超级会员一年预计可省99元</text>
                </view>
                <view class="vip-btn">
                    <text>立即查看</text>
                </view>
            </view>
        </view>
        <!-- 订单信息 -->
        <!-- 其他代码保持不变 -->
    </view>
</template>

<script>
import TabBar from '../../components/TabBar/TabBar.vue';
export default {
    components: {
        TabBar
    },
    data() {
        return {
            scrollTop: 0,
            isHotline: false,
            img: "https://i.hd-r.icu/23984f41efdc593b7c41b6f75422fb49.png",
            hasToken: false, // 新增：判断是否有 token
            userName: "", // 新增：用户昵称
            userImg: "", // 新增：用户头像
            goodsList: [
                // 商品列表数据
            ]
        };
    },
    onLoad() {
        this.checkToken(); // 页面加载时检查 token
    },
    onReady() {
        uni.hideTabBar();
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop;
    },
    methods: {
        checkToken() {
            const token = uni.getStorageSync('token');
            if (token) {
                this.hasToken = true;
                const userInfo = uni.getStorageSync('usernfo');
                if (userInfo) {
                    this.userName = userInfo.user_name;
                    this.userImg = userInfo.img;
                }
            } else {
                this.hasToken = false;
                this.userName = "";
                this.userImg = "";
            }
        },
        /**
         * 关注跳转
         */
        onCollect(type) {
            switch (type) {
                case 'goods':
                    uni.navigateTo({
                        url: '/pages/GoodsOn/GoodsOn'
                    });
                    break;
                case 'content':
                    uni.navigateTo({
                        url: '/pages/ContentCollection/ContentCollection'
                    });
                    break;
                case 'record':
                    uni.navigateTo({
                        url: '/pages/BrowsingHistory/BrowsingHistory'
                    });
                    break;
            }
        },
        /**
         * 订单
         */
        onSkipOrder(type) {
            if (type === 5) {
                uni.navigateTo({
                    url: '/pages/AfterSalesOrder/AfterSalesOrder'
                });
                return;
            }
            uni.navigateTo({
                url: '/pages/MyOrderList/MyOrderList?type=' + type
            });
        },
        /**
         * 钱包跳转点击
         */
        onWallet(type) {
            switch (type) {
                case 'integral':
                    uni.navigateTo({
                        url: '/pages/IntegralDetails/IntegralDetails'
                    });
                    break;
                case 'coupon':
                    uni.navigateTo({
                        url: '/pages/MyCoupon/MyCoupon'
                    });
                    break;
                case 'wallet':
                    uni.navigateTo({
                        url: '/pages/MyWallet/MyWallet'
                    });
                    break;
                case 'SignIn':
                    uni.navigateTo({
                        url: '/pages/SignIn/SignIn'
                    });
                    break;
                case 'payment':
                    uni.navigateTo({
                        url: '/pages/PaymentCode/PaymentCode'
                    });
                    break;
            }
        },
        /**
         * 我的服务点击
         */
        onServer(type) {
            switch (type) {
                case 'feedback':
                    uni.navigateTo({
                        url: '/pages/Feedback/Feedback'
                    });
                    break;
                case 'serve':
                    this.isHotline = true;
                    break;
            }
        },
        /**
         * 设置点击
         */
        onSetting() {
            uni.navigateTo({
                url: '/pages/Setting/Setting'
            });
        },
        /**
         * 消息点击
         */
        onMessage() {
            uni.navigateTo({
                url: '/pages/Message/Message'
            });
        },
        /**
         * 会员点击
         */
        onMmeberVip() {
            uni.navigateTo({
                url: '/pages/MembersOpened/MembersOpened'
            });
        },
        /**
         * 跳转点击
         * @param {String} type 跳转类型
         */
        onSkip(type) {
            switch (type) {
                case 'goods':
                    uni.navigateTo({
                        url: '/pages/GoodsDetails/GoodsDetails',
                        animationType: 'zoom-fade-out',
                        animationDuration: 200
                    });
                    break;
            }
        },
        /**
         * 用户信息点击
         */
        onUserInfo() {
            const token = uni.getStorageSync('token');
            if (token === "") {
                uni.navigateTo({
                    url: '/pages/login/login'
                });
            }
        }
    }
};
</script>

<style scoped lang="scss">
    @import 'my.scss';
</style>